<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生系统</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/bootstrap/js/jquery-2.1.4.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link rel="shortcut icon" href="{% static 'stu_exam_manage/logo/weblogo.ico' %}" />
</head>
<body>
    <div id="header">
        <div id="logo">
            <img src="{% static 'stu_exam_manage/logo/logo2.png' %}" width="100%">
        </div>
        <div id="user">
            <img src="{% static 'stu_exam_manage/head_img/pig.jpg' %}" alt="" height="100%">
            <span id="usermag" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
            <div id="usermenu">
                <div id="logout"><a href="/user_verify/logout.html">注销</a></div>
            </div>
        </div>
    </div>

    <div id="center">
        <div id="left">
            <ul id="menu_ul" class="list-unstyled">
                {% for select_menu in select_menus %}
                    <a class="btn btn-default" href="javascript:void(0);" label='/question_bank_base/{{ select_menu.menu_html_id }}.html' role="button"><h3>{{ select_menu.menu_name }}</h3></a>
                {% endfor %}

            </ul>
            <div id="direct">
                <img src="{% static 'stu_exam_manage/head_img/direct_img/iconfont-right.png' %}" alt="" height="40px">
{#                <img src="{% static 'stu_exam_manage/head_img/direct_img/iconfont-left.png' %}" alt="">#}
            </div>
        </div>
        <div id="right">
            <iframe id="content_iframe" src="http://www.baidu.com" frameborder="0" ></iframe>
        </div>
    </div>

{#    <div id="footer">#}
{##}
{#    </div>#}

    <script>
        $(function($) {
            function init() {
                $('#usermenu').hide()   // 初始化隐藏head下拉菜单
            }
            init()

            $("#left").mouseover(function() {
                // 菜单栏的鼠标滑过事件，用于控制#right的宽度
                $("#right").css("width", "86%")
                //$("#left").css("transition", "1.4s")
                //$("#right").css("transition", "0.3s")
            })
            $("#left").mouseout(function() {
                // 菜单栏的鼠标滑过事件，用于控制#right的宽度
                $("#right").css("width", "99.5%")
                //$("#right").css("transition", "1.4s")
                //$("#left").css("transition", "0.5s")
            })

            $('#menu_ul a').click(function(){
                console.log(1);     // 测试110
                $('#content_iframe').attr('src', $(this).attr('label') )
            })

            $('#user').mouseover(function () {
                $('#usermenu').show()
            })

            $('#user').mouseout(function () {
                $('#usermenu').hide()
            })
        })
    </script>
</body>
<style>
    *{
        margin: 0 auto;
    }
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    #header{
        height: 7%;
        background-color: darkseagreen;
        background: url("{% static 'stu_exam_manage/head_img/head_backimg/spring.jpg' %}") repeat;
    }
    #center{
        height: 92.5%;
    }
    #left{
        width: 14%;
        margin-left: -13.5%;
        height: 100%;
        background-color: orange;
        float: left;
        overflow: hidden;
        {#transition: 1.2s;#}
    }
    #left:hover{
        margin-left: 0;
    }
    #right{
        width: 99.5%;
        height: 100%;
        float: right;
        {#transition: 0.8s;#}
    }
    #footer{
        width: 100%;
        height: 70px;
        background-color: lime;
    }
    #logo{
        width: 10%;
        height: 80%;
        margin-left: 10%;
        border:1px solid transparent;
        float:left;
    }
    #logo img{
        margin-top: 3%;
    }

    #user{
        width: 6%;
        height: 78%;
        {#background-color: lime;#}
        float: right;
        margin-right: 3%;
        margin-top: 0.2%;
    }
    #user #usermag{
        font-size: 26px;
        left: 0%;
        top: 30%;
    }
    #left a{
        width: 100%;
        border-radius: 0px;
    }
    #direct{
        width: 3%;
        height: 100%;
        background-color: white;
        float: right;
    }
    #menu_ul{
        width: 97%;
        float: left;
    }
    #content_iframe{
        width: 100%;
        height: 100%;
    }
    #usermenu{
        width: 50px;
        height: 50px;
        position: absolute;
        background: url("{% static 'stu_exam_manage/head_img/head_backimg/spring.jpg' %}") repeat;
    }
    #logout{
        width: 100%;
        height: 10px;
    }
    #logout a{
        display: block;
        color: #edff8f;
        line-height: 30px;
        text-align: center;
    }
</style>
</html>